import React, { useRef } from "react";
import { Button, message } from "antd";
import { QuickForm } from "@ebonex/ebonex-ui";
import { getList } from "@/pages/model/model/api";
import { useCallback, useMemo, useEffect, useState } from "react";
import { add, getDetails as get, update } from "../api";
import { isNil } from "lodash-es";
import { useSearchParams, useNavigate } from "react-router-dom";

const Article: React.FC<any> = () => {
  const [modeList, setModeList] = useState([]);
  const [search] = useSearchParams();
  const [list, setList] = useState([]);
  const navigate = useNavigate();

  const id = search.get("id");
  const formRef = useRef();
  const getDetails = useCallback(async (id) => {
    const { code, data } = await get(id);
    if (code === 0 && data) {
      setList(data?.list);
      const model = {};
      data?.list.forEach((item) => {
        if (item?.fieldName) {
          model[item?.fieldName] = item?.value;
        }
      });
      formRef.current.setFieldsValue({
        modelId: data?.modelId,
        articleName: data?.articleName,
        ...model,
      });
    }
  }, []);
  useEffect(() => {
    if (!isNil(id)) {
      getDetails(id);
    }
  }, [id]);
  const getModelList = useCallback(async () => {
    const { code, data } = await getList();
    if (code === 0 && data?.list?.length) {
      setModeList(
        data?.list.map((item) => ({
          value: item?.id,
          label: item?.name,
          ...item,
        }))
      );
    } else {
      setModeList([]);
    }
  }, []);
  useEffect(() => {
    getModelList();
  }, [getModelList]);
  const otherSchema = useMemo(() => {
    const schema = list.map((item) => {
      return {
        id: item?.fieldName,
        label: item?.label,
        type: item?.type,
        transform: ({ value }) => {
          return {
            id: item?.fieldId,
            value,
          };
        },
      };
    });
    return schema;
  }, [list]);

  return (
    <>
      <QuickForm
        formRef={formRef}
        onFinish={async (values) => {
          if (!isNil(id)) {
            const { code, data } = await update({ ...values, id });
            if (code === 0) {
              message.success("成功");
              navigate(-1);
            }
          } else {
            const { code, data } = await add(values);
            if (code === 0) {
              message.success("成功");
              navigate(-1);
            }
          }
        }}
        schema={[
          {
            id: "modelId",
            label: "模型",
            type: "select",
            rules: [{ required: true }],
            fieldProps: {
              options: modeList,
              onSelect: (item, option) => {
                setList(option?.list);
              },
            },
          },
          {
            id: "articleName",
            label: "文章名称",
            rules: [{ required: true }],
          },
          ...otherSchema,
        ]}
      ></QuickForm>
    </>
  );
};
export default Article;
